<template>
  <div class="main">
    <el-collapse>
      <el-collapse-item title="商品管理介绍">
        <div style="padding:10px 5px">商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情</div>
      </el-collapse-item>
    </el-collapse>
    <el-card style="margin:30px">
      <el-collapse>
        <el-collapse-item title="条件查询" style="border-bottom:1px solid #ebeef5">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="mini">
            <el-form-item label="商品名称">
              <el-input v-model="searchForm.name" placeholder="商品名称/模糊查询" />
            </el-form-item>
            <el-form-item label="商品货号">
              <el-input v-model="searchForm.productCategoryId" placeholder="商品货号" />
            </el-form-item>
            <el-form-item label="品牌">
              <el-select v-model="searchForm.brandId" placeholder="品牌">
                <el-option v-for="item in bandList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="上架状态">
              <el-select v-model="searchForm.publishStatus " placeholder="上架状态">
                <el-option label="上架" value="1" />
                <el-option label="未上架" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select v-model="searchForm.verifyStatus " placeholder="审核状态">
                <el-option label="审核" value="1" />
                <el-option label="未审核" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item style="float:right">
              <el-button @click="reset">重置</el-button>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <!-- 商品列表 -->
    <el-card>
      <div slot="header" class="clearfix">
        <el-button type="primary" size="mini" @click="addProduct">新增</el-button>
        <el-button type="primary" size="mini" @click="exportExcal">导出商品列表excal文件</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="productList"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
          align="center"
        />
        <el-table-column label="商品图片" width="200" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.pic" alt="" style="width:100px;height:100px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="350" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.name }}</div>
            <div>品牌：{{ scope.row.brandName }}</div>
            <div>{{ scope.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品价格" width="150" align="center">
          <template slot-scope="scope">
            <div>现价：{{ scope.row.promotionPrice }}</div>
            <div>原价：{{ scope.row.price }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="productCategoryName"
          label="商品类别"
          width="150"
          align="center"
        />
        <el-table-column label="标签" width="180" align="center">
          <template slot-scope="scope">
            <div style="display:flex;flex-flow:column">
              <el-switch v-model="scope.row.newStatus" :inactive-value="0" :active-value="1" inactive-text="最新" @change="changeNewStatus(scope.row)" />
              <el-switch v-model="scope.row.recommendStatus" :inactive-value="0" :active-value="1" inactive-text="推荐" @change="changeRecommendStatus(scope.row)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="标签2" width="180" align="center">
          <template slot-scope="scope">
            <div style="display:flex;flex-flow:column">
              <el-switch v-model="scope.row.publishStatus" :inactive-value="0" :active-value="1" inactive-text="发布" @change="changepublishStatus(scope.row)" />
              <el-switch v-model="scope.row.verifyStatus" :inactive-value="0" :active-value="1" inactive-text="审核" @change="changeverifyStatus(scope.row)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="SKU" width="150" align="center">
          <template slot-scope="scope">
            <div style="color:#409eff;font-size:14px" @click="editSku(scope.row)">编辑SKU</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          width="50"
          align="center"
        />
        <el-table-column
          prop="sort"
          label="排序"
          width="100"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" style="color:#f00" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="page.currentPage"
        :page-sizes="page.pagesizes"
        :page-size="page.pagesize"
        layout="sizes, prev, pager, next"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <skuDetail ref="skudetail" />
  </div>
</template>
<script>
import { findAllBrand } from '@/api/market/activity'
import { productsByPage, switchNewStatus, switchRecommandStatus, switchPublishStatus, switchVerifyStatus, del } from '@/api/product/product'
import skuDetail from './component/skuDetail'
export default {
  components: { skuDetail },
  data() {
    return {
      bandList: [],
      searchForm: {
        name: '',
        brandId: '',
        productCategoryId: '',
        publishStatus: '',
        verifyStatus: ''
      },
      productList: [],
      page: {
        currentPage: 1,
        pagesizes: [10, 20, 30],
        pagesize: 10,
        total: 0
      },
      loading: false
    }
  },
  computed: {
  },
  created() {
    this.getProList()
    findAllBrand().then(res => {
      // console.log(res)
      this.bandList = res.data.items
    })
  },
  methods: {
    getProList() {
      this.loading = true
      productsByPage(this.page.currentPage, this.page.pagesize, { ...this.searchForm }).then(res => {
        console.log(res)
        this.productList = res.data.rows
        this.page.total = res.data.total
      })
      this.loading = false
    },
    reset() {
      this.searchForm = this.$options.data().searchForm
    },
    search() {
      this.getProList()
    },
    handleSizeChange(val) {
      this.page.pagesize = val
      this.getProList()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getProList()
    },
    changeNewStatus(row) {
      var nowStatus = row.newStatus === 1 ? 0 : 1
      switchNewStatus({
        productId: row.id,
        status: row.newStatus
      }).then(res => {
        if (res.success) {
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
          row.newStatus = nowStatus
        }
      })
    },
    changeRecommendStatus(row) {
      var nowStatus = row.recommendStatus === 1 ? 0 : 1
      switchRecommandStatus({
        productId: row.id,
        status: row.recommendStatus
      }).then(res => {
        if (res.success) {
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
          row.recommendStatus = nowStatus
        }
      })
    },
    changepublishStatus(row) {
      var nowStatus = row.publishStatus === 1 ? 0 : 1
      switchPublishStatus({
        productId: row.id,
        status: row.publishStatus
      }).then(res => {
        if (res.success) {
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
          row.publishStatus = nowStatus
        }
      })
    },
    changeverifyStatus(row) {
      var nowStatus = row.verifyStatus === 1 ? 0 : 1
      switchVerifyStatus({
        productId: row.id,
        status: row.verifyStatus
      }).then(res => {
        if (res.success) {
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
          row.verifyStatus = nowStatus
        }
      })
    },
    addProduct() {
      this.$router.push({ name: 'AddProduct' })
    },
    // 编辑sku
    editSku(val) {
      this.$refs.skudetail.open(val.id)
    },
    edit(val) {
      this.$router.push({ name: 'EditProduct', params: { id: val.id }})
    },
    del(val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(val.id).then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            this.getProList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 导出excal
    exportExcal() {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['创建日期', '商品名称', '商品价格', '商品类别']
        const keys = ['createTime', 'name', 'price', 'productCategoryName']
        const data = this.filterData(keys)
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // filterData(keys) {
    //   var data = this.productList.forEach(item => {
    //     return keys.map(key => {
    //       return item[key]
    //     })
    //   })
    //   return data
    // }
    filterData(keys) {
      return this.productList.map((val) =>
        keys.map((j) => {
          return val[j]
        })
      )
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-switch{
    margin: 10px 0;
  }
</style>
